<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Proxy2</title>
    <script>
        const DOM = new Proxy({}, {
            get(target, property) {
                // console.log(target, property);
                // property DOM.XXX 里面的xxx
                return function(attr = {}, ...children) {
                    // console.log(attr, children);
                    const el = document.createElement(property);

                    //添加属性
                    for (let key of Object.keys(attr)) {
                        el.setAttribute(key, attr[key]);
                    }
                    //添加子元素
                    for (let child of children) {
                        if (typeof child == 'string') {
                            child = document.createTextNode(child);
                        }
                        el.appendChild(child);
                    }
                    return el;
                }
            }
        });

        let oDiv = DOM.div({
            id: 'div1',
            class: 'aaa'
        }, '我是div', '呵呵呵', DOM.a({
            href: 'http://baidu.com'
        }, '百度'));

        // console.log(oDiv);

        window.onload = function() {
            document.body.appendChild(oDiv);
        }
    </script>
</head>

<body>

</body>

</html>